<script language="JavaScript" type="text/JavaScript">
<!--
//--------------------------------------------------------------------------------
// Answer Class

    function Answer(strID, htmlAnswerContent, htmlAssessmentContent, htmlReportContent, numScore, isCorrect) {
        this._strID = strID;
        this._htmlAnswerContent = htmlAnswerContent;
        this._htmlAssessmentContent = htmlAssessmentContent;
        this._htmlReportContent = htmlReportContent;
        this._numScore = numScore;
        this._isCorrect = isCorrect;
    } //Answer

    Answer.prototype.getID = function() {
        return this._strID;
    } //getID

    Answer.prototype.setID = function(strID) {
        this._strID = strID;
    } //setID

    Answer.prototype.getAnswerContent = function() {
        return this._htmlAnswerContent;
    } //getAnswerContent

    Answer.prototype.setAnswerContent = function(htmlAnswerContent) {
        this._htmlAnswerContent = htmlAnswerContent;
    } //setAnswerContent

    Answer.prototype.getAssessmentContent = function() {
        return this._htmlAssessmentContent;
    } //getAssessmentContent

    Answer.prototype.setAssessmentContent = function(htmlAssessmentContent) {
        this._htmlAssessmentContent = htmlAssessmentContent;
    } //setAssessmentContent

    Answer.prototype.getReportContent = function() {
        return this._htmlReportContent;
    } //getReportContent

    Answer.prototype.setReportContent = function(htmlReportContent) {
        this._htmlReportContent = htmlReportContent;
    } //setReportContent

    Answer.prototype.getScore = function() {
        return this._numScore;
    } //getScore

    Answer.prototype.setScore = function(numScore) {
        this._numScore = numScore;
    } //setScore

    Answer.prototype.isCorrect = function() {
        return this._isCorrect;
    } //isCorrect

    Answer.prototype.setIsCorrect = function(boolIsCorrect) {
        this._isCorrect = boolIsCorrect;
    } //setIsCorrect

//--------------------------------------------------------------------------------

    //the array of Answer instances (see above)
    var arrAnswers = new Array();


    function clearAnswers() {
        arrAnswers = new Array();
    } //clearAnswers


    function addAnswer(strID, htmlAnswerContent, htmlAssessmentContent, htmlReportContent, numScore, isCorrect) {
        //create a new answer instances
        var lAnswer = new Answer(strID, htmlAnswerContent, htmlAssessmentContent, htmlReportContent, numScore, isCorrect);
        arrAnswers.push(lAnswer);
    } //addAnswer


    function removeAnswer(numIndex) {
        //is this the last answer? (you're not allow to delete the last one)
        if (arrAnswers.length > 1) {
            //shuffle other answers down
            for(var i = numIndex; i < arrAnswers.length; i++) {
                arrAnswers[i] = arrAnswers[i+1];
            } //for

            //remove the last answer!
            arrAnswers.pop();

            //ensure at least one answer is correct
            var correctIdx = -1;
            for(var i = 0; i < arrAnswers.length && correctIdx < 0; i++) {
                correctIdx = arrAnswers[i].isCorrect() ? i : -1;
            } //for
            
            //if no answer is correct make the first one correct
            if (correctIdx < 0)
                arrAnswers[0].setIsCorrect(true);

            //now render the answers
            renderAnswers();
        } //if
    } //removeAnswer


    function getIndexForAnswerID(strID) {
        for (var i = 0; i < arrAnswers.length; i++) {
            if (arrAnswers[i].getID() == strID)
                return i;
        } //for
        return -1;
    } //getIndexForAnswerID


    function isUniqueAnswerIDForIndex(strID, numIndex) {
        var lIndex = getIndexForAnswerID(strID);
        return lIndex == -1 || lIndex == numIndex;
    } //isUniqueAnswerIDForIndex


    function generateUniqueAnswerID() {
        var lPrefix = '';
        var lGuess = 0;
        var lIsUnique = false;
        while (!lIsUnique) {
            var lID = lPrefix + String.fromCharCode(65 + lGuess);
            var lIndex = getIndexForAnswerID(lID);
            if (lIndex < 0) {
                return lID;
            } else {
                lGuess++;
                lGuess = lGuess % 26;
                if(lGuess == 0) {
                    lPrefix = "A";
                } //if
            } //if
        } //while
    } //generateUniqueAnswerID


    function moveAnswerUp(numIndex) {
        //ensure we aren't trying to move the top index?
        if (numIndex > 0) {
            //swap the above answer with the specified one
            var lAboveAnswer = arrAnswers[numIndex-1];
            arrAnswers[numIndex-1] = arrAnswers[numIndex];
            arrAnswers[numIndex] = lAboveAnswer;

            //now render the answers
            renderAnswers();
        } //if
    } //moveAnswerUp


    function moveAnswerDown(numIndex) {
        //ensure we aren't trying to move the bottom index?
        if (numIndex < arrAnswers.length-1) {
            //swap the beloew answer with the specified one
            var lBelowAnswer = arrAnswers[numIndex+1];
            arrAnswers[numIndex+1] = arrAnswers[numIndex];
            arrAnswers[numIndex] = lBelowAnswer;

            //now render the answers
            renderAnswers();
        } //if
    } //moveAnswerDown


    function storeAnswerChange(numIndex) {
        //do we have such an answer?
        if (arrAnswers.length > 0 && numIndex >= 0 && numIndex < arrAnswers.length) {
            //get the span containing the specified answer
            var lAnswerSpan = document.getElementById("spanAnswer" + numIndex);

            //get the answer
            var lAnswer = arrAnswers[numIndex];

            //update the answer content
            lAnswer.setAnswerContent(document.getElementById("keAnswerContent" + numIndex).value);

            //update the assessment content
            lAnswer.setAssessmentContent(document.getElementById("keAnswerAssessmentContent" + numIndex).value);

            //update the report content
            lAnswer.setReportContent(document.getElementById("keAnswerReportContent" + numIndex).value);

            //update the ID
            lAnswer.setID(document.getElementById("keAnswerID" + numIndex).value);

            //update the score
            lAnswer.setScore(document.getElementById("keAnswerScore" + numIndex).value);

            //update is correct
            lAnswer.setIsCorrect(document.getElementById("keAnswerIsCorrect" + numIndex).checked);

            //reset other answers if this one is the correct one
            for (var i = 0; i < arrAnswers.length; i++) {
                if (i != numIndex)
                    arrAnswers[i].setIsCorrect(false);
            } //for
            //get the score
        } //if
    } //storeAnswerChange


    function renderAnswers() {
        //get the spanAnswerTemplate (we want to use it for positioning and cloning!)
        var lSpanTemplate = document.getElementById("spanAnswerTemplate");

        //get the first span for the first answer (the next sibling of the template)
        var lCurrentAnswerNode = lSpanTemplate.nextSibling;
        
       
        //add all of the answers
        for (var i = 0; i < arrAnswers.length; i++) {

            //get the current answer
            var lAnswer = arrAnswers[i];
            
            //do we have a current answer span?
            if (lCurrentAnswerNode == null) {
                //clone a new one!
                var lCurrentAnswerNode = lSpanTemplate.cloneNode(true);
                lCurrentAnswerNode.id = "";

                //add the new node to the end of the answer group
                document.getElementById("spanAnswerGroup").appendChild(lCurrentAnswerNode);
            } //if

            //set the Answer letter (ie: A, B, C, D etc...)
            lCurrentAnswerNode.getElementsByTagName("span").item(0).innerHTML = String.fromCharCode(65 + i);
            //alert(String.fromCharCode(65+i));

            //set the Answer Content
            var lTextAreas = lCurrentAnswerNode.getElementsByTagName("textarea");
            lTextAreas.item(0).name = "keAnswerContent" + i; lTextAreas.item(0).id = lTextAreas.item(0).name;
            lTextAreas.item(0).value = lAnswer.getAnswerContent();
            lTextAreas.item(0).answerIdx = i;

            //set the Assessment Content
            lTextAreas.item(1).name = "keAnswerAssessmentContent" + i; lTextAreas.item(1).id = lTextAreas.item(1).name;
            lTextAreas.item(1).value = lAnswer.getAssessmentContent();
            lTextAreas.item(1).answerIdx = i;

            //set the Report Content
            lTextAreas.item(2).name = "keAnswerReportContent" + i; lTextAreas.item(2).id = lTextAreas.item(2).name;
            lTextAreas.item(2).value = lAnswer.getReportContent();
            lTextAreas.item(2).answerIdx = i;

            //set the ID
            var ltxtID = lCurrentAnswerNode.getElementsByTagName("input").item(0);
            ltxtID.name = "keAnswerID" + i; ltxtID.id = ltxtID.name;
            ltxtID.value = lAnswer.getID();
            ltxtID.answerIdx = i;

            //set the Score
            var ltxtScore = lCurrentAnswerNode.getElementsByTagName("input").item(1);
            ltxtScore.name = "keAnswerScore" + i; ltxtScore.id = ltxtScore.name;
            ltxtScore.value = lAnswer.getScore();
            ltxtScore.answerIdx = i;

            //set the status of the isCorrect
            var lradioIsCorrect = lCurrentAnswerNode.getElementsByTagName("input").item(2);
            lradioIsCorrect.id = "keAnswerIsCorrect" + i;
            lradioIsCorrect.name = "radioIsCorrect"
            lradioIsCorrect.value = i;
            lradioIsCorrect.checked = lAnswer.isCorrect();
            lradioIsCorrect.answerIdx = i;

            //add the 'answerid' to all of the images (we use them as buttons)
            var lImages = lCurrentAnswerNode.getElementsByTagName("img");
            for (var j = 0; j < lImages.length; j++) {
                lImages.item(j).answerIdx = i;
            } //for

            //restrict use of the up/down arrow if this is the first/last answer
            if (arrAnswers.length == 1) {
                lImages.item(0).parentNode.style.display = "none";      //up
                lImages.item(1).parentNode.style.display = "none";      //blank
                lImages.item(2).parentNode.style.display = "none";      //down
            } else if (i == 0) {
                lImages.item(0).parentNode.style.display = "none";      //up
                lImages.item(1).parentNode.style.display = "inline";    //blank
                lImages.item(2).parentNode.style.display = "inline";    //down
            } else if (i == arrAnswers.length-1) {
                lImages.item(0).parentNode.style.display = "inline";    //up
                lImages.item(1).parentNode.style.display = "inline";    //blank
                lImages.item(2).parentNode.style.display = "none";      //down
            } else {
                lImages.item(0).parentNode.style.display = "inline";    //up
                lImages.item(1).parentNode.style.display = "none";      //blank
                lImages.item(2).parentNode.style.display = "inline";    //down
            } //if

            //set the answer background colour so we get alternative answer shading
            if (i % 2 == 0)
                lCurrentAnswerNode.backgroundColor = "";
            else
                lCurrentAnswerNode.backgroundColor = "#FFF7E5";
            //display the answer
            lCurrentAnswerNode.style.display = "block";

            //step to the next answer span
            lCurrentAnswerNode = lCurrentAnswerNode.nextSibling;
        } //for

        //clean up unused spans for answers
        while (lCurrentAnswerNode != null) {
            var lNextAnswerSpan = lCurrentAnswerNode.nextSibling;
            //lCurrentAnswerNode.removeNode(true);
            lCurrentAnswerNode.parentNode.removeChild(lCurrentAnswerNode);
            lCurrentAnswerNode = lNextAnswerSpan;
        } //while
        
        //set the keAnswerCount to the number of answers
        document.getElementById("keAnswerCount").value = arrAnswers.length;
    } //renderAnswers


    function createNewAnswer() {
        //ensure we don't have more the 26 answers
        if (arrAnswers.length < 26) {
            addAnswer(generateUniqueAnswerID(),'','','',0,false);
            renderAnswers();
        } else {
            alert("Sorry... There is a maximum of 26 answers");
        } //if
    } //createNewAnswer
//-->
</script>
<span id="spanAnswerGroup"><input name="keAnswerCount" type="hidden" id="keAnswerCount" value="0">
<table id="spanAnswerTemplate" style="display:none" width="100%" border="0" style="BORDER-TOP:1px solid #C1CDD8;BORDER-LEFT:1px solid #FFFFFF;BORDER-RIGHT:1px solid #FFFFFF;">
  <tr>
    <td width="4%" align="center" valign="top" nowrap><font size="+1"><strong><span templateId="AnswerID">A</span></strong></font><br>
      <span><img src="MultipleChoiceEditlet_up.icon.gif" answerIdx="-1" alt="Move Up" width="9" height="6" onClick="moveAnswerUp(this.answerIdx);" style="cursor:hand"></span>
      <span><img src="MultipleChoiceEditlet_blank.icon.gif" width="9" height="6"></span><span><img src="MultipleChoiceEditlet_down.icon.gif" answerIdx="-1" alt="Move Down" width="9" height="6" onClick="moveAnswerDown(this.answerIdx);" style="cursor:hand"></span><br>
      <br> <img src="MultipleChoiceEditlet_delete.icon.gif" answerIdx="-1" alt="Delete" width="11" height="12" onClick="removeAnswer(this.answerIdx);" style="cursor:hand"></td>
    <td colspan="3" valign="top" nowrap><strong>Answer:</strong><br> <textarea id="keAnswerContent" name="keAnswerContent" answerIdx="-1" cols="40" rows="6" onChange="storeAnswerChange(this.answerIdx);">TEMPLATE</textarea>EPOZ
    </td>
  </tr>
  <tr>
    <td align="left" nowrap>&nbsp;</td>
    <td colspan="3" valign="top" nowrap><strong>Assessment Content:</strong><br> <textarea id="keAnswerAssessmentContent" name="keAnswerAssessmentContent" cols="40" rows="6" answerIdx="-1" onChange="storeAnswerChange(this.answerIdx);"></textarea>EPOZ
    </td>
  </tr>
  <tr>
    <td nowrap>&nbsp;</td>
    <td colspan="3" valign="top" nowrap><strong>Report Content:</strong><br> <textarea id="keAnswerReportContent" name="keAnswerReportContent" cols="40" rows="6" answerIdx="-1" onChange="storeAnswerChange(this.answerIdx);"></textarea>EPOZ
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle" nowrap>&nbsp;</td>
    <td width="10%" valign="top" nowrap><strong>Identity</strong>:<br>
      <input id="keAnswerID" name="keAnswerID" type="text" onBlur="if (!isUniqueAnswerIDForIndex(this.value,this.answerIdx) || this.value==''){window.alert('IDs must be unique and not empty within this component');this.focus();}else{storeAnswerChange(this.answerIdx);}" size="4" maxlength="4">
    </td>
    <td valign="top" nowrap><strong>Score:</strong><br> <input type="text" name="keAnswerScore" id="keAnswerScore" onBlur="if(isNaN(this.value)){window.alert('Score must be a number');this.value=generateUniqueAnswerID();this.focus();}else{storeAnswerChange(this.answerIdx);}">
    </td>
    <td align="left" valign="top" nowrap> <strong>Correct Answer?</strong>
      <input id="radioIsCorrect" name="radioIsCorrect" type="radio" value="-1" onChange="storeAnswerChange(this.answerIdx);">
    </td>
  </tr>
</table></span><br>
<table id="tblAddOption" width="100%" border="0" style="BORDER-TOP:1px solid #C1CDD8;BORDER-LEFT:1px solid #FFFFFF;BORDER-RIGHT:1px solid #FFFFFF;">
  <tr>
    <td align="left">
      <input id="Option" name="Option" type="button" id="Option" value="Add Answer" onClick="createNewAnswer();"></td>
  </tr>
</table>
<br>